<template>
    <div id="music">
        <header>
            <ul class="clearfix">
                <li class="sound_recording"><span></span></li>
                <li class="search" @click="showSearch">
                    <van-icon name="search" />
                    <span class="hotname">Leon Lai</span>
                </li>
                <li class="in_play"><span></span></li>
            </ul>
             <!-- 搜索弹窗内容 -->
            <van-popup v-model="showss">
                <!-- 搜索头部 -->
                <ul class="clearfix searchTop">
                    <li class="searchs">
                        <van-search placeholder="search" v-model="value" @search="onSearch" />
                    </li>
                    <li @click="closes">取消</li>
                    <li class="searchUser"><van-icon name="user-o" /></li>
                </ul>
                <!-- 搜索历史 -->
                <div class="searchHistory">
                    <div class="title clearfix">
                        <span class="history">搜索历史</span>
                        <span class="historyDelete"><van-icon name="delete" /></span>
                    </div>
                    <ul class="historyContent clearfix">
                        <li v-for="(item,index) in searchList" :key="index"  v-if="item" @click="onSearch2(item)">{{item}}</li>
                    </ul>
                </div>
                <!-- 热搜榜 -->
                <div class="hotSearch">
                    <h2>热搜榜</h2>
                </div>
            </van-popup>
        </header>
        <!-- 加载动画 -->
        <div class="max_box" v-if="isData">
            <!-- 轮播部分 -->
            <div class="top">
                <!-- 首页轮播图 -->
                <div class="banner">
                    <van-swipe :autoplay="3000" class="clearfix">
                        <van-swipe-item v-for="(item, index) in images" :key="index" >
                            <img v-lazy="item.picUrl" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <!-- 私人FM  每日推荐  歌单 排行榜 -->
                <div class="four_class">
                    <ul class="clearfix">
                        <li>
                            <div class="icon">
                                <i class="iconfont icon-FM"></i>
                            </div>
                            <p>私人FM</p>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="iconfont icon-meirituijian-"></i>
                            </div>
                            <p>每日推荐</p>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="iconfont icon-yinle1"></i>
                            </div>
                            <p>歌单</p>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="iconfont icon-paihangbang"></i>
                            </div>
                            <p>排行榜</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 推荐歌单 以及最新音乐 -->
            <div class="content">
                <!-- 推荐歌单 -->
                <div class="personalized">
                    <h2>推荐歌单 <van-icon name="arrow" /></h2>
                    <ul class="clearfix">
                        <li v-for="(item,index) in personalizedList" :key="index" @click="songSheet(item.id)">
                            <div class="personalized_icon">
                                <img :src="item.picUrl" alt="">
                                <span>{{item.playCount.toString().length>4?Math.round(item.playCount/10000)+'w':Math.round(item.playCount)}}</span>
                            </div>
                            <p class="personalized_name">{{item.name}}</p>
                        </li>
                    </ul>
                </div>
                <!-- 网友精选歌单 -->
                <div class="playlist">
                    <h2>网友精选歌单 <van-icon name="arrow" /></h2>
                    <ul class="clearfix">
                        <li v-for="(item,index) in playlistFriend" :key="index" @click="songSheet(item.id)" >
                            <div class="playlist_icon">
                                <img :src="item.coverImgUrl" alt="">
                                <span>{{item.playCount.toString().length>4?Math.round(item.playCount/10000)+'w':Math.round(item.playCount)}}</span>
                            </div>
                            <p class="playlist_name">{{item.name}}</p>
                        </li>
                    </ul>
                </div>
                <!-- 最新音乐 -->
                <div class="newsong">
                    <h2>最新音乐</h2>
                    <ul>
                        <li v-for="(item,index) in newsongList" :key="index" class="clearfix" @click="playMusic(item)">
                            <!-- 歌曲歌手 -->
                            <div class="sgchfl">
                                <div class="sgchfl_name">{{item.name}}</div>
                                <div class="arists">{{item.aristsName}}</div>
                            </div>
                            <!-- 播放按钮 -->
                            <div class="sgchfr">
                                <span class="sgchply"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <Tabbar></Tabbar>
        <!-- loading加载 -->
        <Loading v-if="isLoging" ></Loading>
    </div>
</template>
<script>
import Tabbar from '@/components/Tabbar.vue'
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
import APlayer from '@moefe/vue-aplayer';
import { Dialog } from 'vant';
import Loading from '@/components/Loading.vue'
export default {
    name:'music',
    data () {
        return {
            isData:false,
            isLoging:true,//loading加载
            isList:false,//定时器 用于判断Loading
            images:[],//banner图  懒加载
            personalizedList:[],//推荐歌单
            playlistFriend:[],//网友精选歌单
            newsongList:[],//最新音乐
            musicDetail:{//音乐id
                songId:null,//歌单id
                id:null,//音乐id
                title:null,//歌曲名字
                author:null,//作者
                img:null,//背景图
                url:null,//歌曲地址
                lrc:null,//歌词
                list:[],//歌曲列表
            },
            showss: false,//搜索弹窗
            value:'',//搜索内容
            searchLists:[],
            isAplayer:null,//控制播放器
        }
    },
    components: {
        Tabbar,
        Loading
    },
    computed: {
        ...mapState(["searchList"])
    },
    created () {
        //获取首页所需要的数据
        this.axios.all([
            this.axios.get('/music/banner'),//轮播图
            this.axios.get('/music/personalized'),//推荐歌单
            this.axios.get('/music/top/playlist?order=hot&limit=9'),//网友精选碟歌单  hot 代表热门  new 代表新出的
            this.axios.get('/music/personalized/newsong'), //最新音乐
        ]).then(this.axios.spread((banner,personalized, playlist,newsong) => {
            banner.data.banners.forEach(res =>{
                 this.images.push(res)
            })
            //限制推荐歌单下面的个数  （我设置为9个）
            personalized.data.result.forEach((res,index) =>{
                if(index<9){
                this.personalizedList.push(res); 
                }
            })  
            // 网友精选歌单
            this.playlistFriend = playlist.data.playlists;
            //获取最新音乐
            newsong.data.result.forEach(res =>{
                res.aristsName = '';//歌手以及当前作曲
                if(res.song.artists.length>1){
                    //二人以上的歌手名字
                    res.song.artists.forEach((item,index) =>{
                        if(index == res.song.artists.length-1){
                            res.aristsName = res.aristsName+item.name+res.name;      
                        }else{
                            res.aristsName = res.aristsName+item.name+'/';  
                        }
                    })
                }else{
                    //一个歌手
                    res.aristsName = res.song.artists[0].name+'-'+res.name;   
                }
               
            })
            this.newsongList = newsong.data.result;
            //初始化时将播放列表传给musicDetail (vuex)
            this.newsongList.forEach(item =>{
                const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 '
                this.musicDetail.list.push({
                    id:item.id,
                    img:item.song.album.blurPicUrl,
                    title:item.name,
                    author:item.song.artists[0].name,
                    url:url,
                    lrc:null,
                })
            })
            this.$store.commit('getMusicDetail', this.musicDetail);
            // console.log(this.musicDetail)

            //当请求到所有页面时 开始判断
            this.isList = true;
        }))

    },
    watch: {
        //加载过度效果
        isList:{
            handler: function (newVal,oldVal){
                if(newVal == true){
                    setTimeout(()=>{
                        this.isLoging = false;
                        this.isData = true;
                    },500)
                }
            }
        } 
    },
    methods: {
        //将当前要播放的音乐name传入到vuex中
        playMusic (item){
            const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 '   
            //当前播放列表
            this.musicDetail.id = item.id;
            this.musicDetail.img = item.song.album.blurPicUrl;
            this.musicDetail.title = item.name;
            this.musicDetail.author = item.song.artists[0].name;
            this.musicDetail.url = url;
            this.$store.commit('getMusicDetail', this.musicDetail);
            //控制显示播放器
            this.isAplayer = true;
            this.$store.commit('getAplayer',this.isAplayer)
           
        },
        //歌单跳转
        songSheet(item){
            this.musicDetail.songId = item;
            this.$store.commit('getMusicDetail', this.musicDetail);
            this.$router.push('/playMusic');
        },
        //展开搜索界面
        showSearch(){
            this.showss = true;
            this.value = '';
            
        },
        //取消搜索
        closes(){
            this.showss = false;
        },
        //确定搜索
        onSearch(){
            this.searchLists.unshift(this.value);
            this.$store.commit('getSearchList', this.searchLists);
            this.$router.push('/search');
        },
        //点击搜索历史搜索
        onSearch2(item){
            this.searchLists.unshift(item);
            this.$store.commit('getSearchList', this.searchLists);
            this.$router.push('/search');
        }
       
        
    }
}
</script>
<style lang='less'>
    #music{
        header{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            color: #000;
            position: fixed;
            top:0;
            z-index: 99;
            width: 100%;
            ul{
                li{
                    float: left;
                    width: 15%;
                }
                .search{
                    width: 70%;
                    background-color: #F7F7F7;
                    border-radius: 20px;
                    color: #000;
                    height: 36px;
                    line-height: 36px;
                    margin-top: 7px;
                    .van-icon-search{
                        vertical-align: middle;
                        font-size: 16px;
                        color: #ccc;
                    }
                    .hotname{
                        color: #ccc;
                        font-size: 14px;
                        margin-left: 5px;
                    }
                    
                }
                .sound_recording{
                    span{
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        background-position: 0;
                        background-repeat: no-repeat;
                        background-size: 18px 18px;
                        vertical-align: middle;
                        background-image: url('../images/wyy/sound_recording.svg');
                    }
                }
                .in_play{
                   span{
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        background-position: 0;
                        background-repeat: no-repeat;
                        background-size: 18px 18px;
                        vertical-align: middle;
                        background-image: url('../images/wyy/in_play_black.svg');
                    } 
                }
            }
            .van-popup{
                width: 100%;
                height: 100%;
                .searchTop{
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: #fff;
                    color: #000;
                    position: fixed;
                    top:0;
                    z-index: 99;
                    width: 100%;
                    li{
                        float: left;
                        width: 10%;
                    }
                    .searchs{
                        width: 70%;
                        margin-top: 14px;
                        padding: 0 15px;
                        .van-search{
                            padding: 0;
                            .van-search__content{
                                border-radius: 20px;
                            }
                        }
                    }
                    .searchUser{
                        font-size: 18px;
                        i{
                            vertical-align: middle;
                        }
                    }
                }
                .searchHistory{
                    margin-top: 60px;
                    padding: 0 15px;
                    .title{
                        height: 30px;
                        line-height: 30px;
                        .history{
                            float: left;
                        }
                        .historyDelete{
                            float: right;
                            font-size: 16px;
                            .van-icon-delete{
                                vertical-align: middle;
                            }
                        }
                    }
                    .historyContent{
                        height: 24px;
                        overflow-y: hidden;
                        overflow-x: auto;
                        white-space: nowrap;
                        display: flex;
                        margin-top: 10px;
                        li{
                            float: left;
                            background-color: #f7f8fa;
                            margin-left: 10px;
                            height: 24px;
                            line-height: 24px;
                            text-align: center;
                            padding: 0 15px;
                            border-radius: 24px;
                            font-size: 12px;
                        }
                        li:nth-of-type(1){
                            margin-left: 0;
                        }
                    }
                }
                .hotSearch{
                    padding: 0 15px;
                    margin-top: 20px;
                    h2{
                        height: 30px;
                        line-height: 30px;
                        text-align: left;
                    }
                }
                
            }
        }
        .max_box{
            overflow: auto;
            margin-top: 50px;
        }
        .van-loading{
            text-align: center;
            top: 50px;
            z-index: 999;
        }
        .top{
            .banner{
                padding: 15px;
                .van-swipe{
                    height: 3.2rem;
                }
                .van-swipe-item{
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        margin: 0 auto;
                        border-radius: 10px;
                    }
                }
            }
             .four_class{
            // 四种图标
            @font-face {
                    font-family: "iconfont";
                    src: url(data:application/vnd.ms-fontobject;base64,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);
                    /* IE9*/
                    src: url(data:application/vnd.ms-fontobject;base64,hA8AANwOAAABAAIAAAAAAAIABQMAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAOVgRvQAAAAAAAAAAAAAAAAAAAAAAABAAaQBjAG8AbgBmAG8AbgB0AAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAQAGkAYwBvAG4AZgBvAG4AdAAAAAAAAAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI7eEjqAAABfAAAAFZjbWFwTKLmhgAAAfQAAAH0Z2x5ZqT1pkQAAAP8AAAIBGhlYWQTJA4+AAAA4AAAADZoaGVhCH0EMwAAALwAAAAkaG10eCCr//IAAAHUAAAAIGxvY2EIkAZgAAAD6AAAABJtYXhwARsApQAAARgAAAAgbmFtZT5U/n0AAAwAAAACbXBvc3TuPMF+AAAOcAAAAGsAAQAAA4D/gABcBKv/8v//BKwAAQAAAAAAAAAAAAAAAAAAAAgAAQAAAAEAAL0RWDlfDzz1AAsEAAAAAADXs2UhAAAAANezZSH/8v9/BKwDgAAAAAgAAgAAAAAAAAABAAAACACZAAkAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQVAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5QHm4wOA/4AAXAOAAIEAAAABAAAAAAAABAAAAASr//IEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAFAAAAAwAAACwAAAAEAAABkAABAAAAAACKAAMAAQAAACwAAwAKAAABkAAEAF4AAAAQABAAAwAA5QHmBuYr5kvmUuZh5uP//wAA5QHmBuYr5kvmUuZh5uP//wAAAAAAAAAAAAAAAAAAAAEAEAAQABAAEAAQABAAEAAAAAYABwADAAEABQAEAAIAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAGQAAAAAAAAABwAA5QEAAOUBAAAABgAA5gYAAOYGAAAABwAA5isAAOYrAAAAAwAA5ksAAOZLAAAAAQAA5lIAAOZSAAAABQAA5mEAAOZhAAAABAAA5uMAAObjAAAAAgAAAAAAhgEWAaACKgJoAyAEAgAAAAX/8v+ABKwDgAAPAB8AMwBGAFIAACUzPgE1Ey4BJyMOAQcDFBYFMz4BNxMuAScjDgEHAx4BJR4BMz4BPwE2JicmBgcmBgcGFhc3PgEfATc+ARceAQ8BFAYvAS4BASEiBhQWMyEyNjQmAhWIJDQDATEmiCUyAQMzAdiIJDMBAwExJogmMQEEATP83BUeARweAWcoKwY+VQJEVQErJQYwASYdJSYBKBwEFhVqBwZsAwsEW/uLCxAQCwR1DA8PIgEzJQKtJTIBATIl/VMlMwEBMyUBZyUyAQEyJf6ZJTMcFQgCGQJqPVUCLCIGKy0HO1gCcwMPEiUlAhASASkgbQEDBm8BKv67DxcQEBcPAAAGAAD/fwQAA4AADAAZACYAMwBLAF8AACU0LgEiDgEVHgEXPgE3FA4BIi4BJz4BNx4BBTQuASIOARUeARc+ATcOAiIuATU+ATceARcRNC4CIyEiDgIVETMRPgEzITIWFRETNS4BIyEiBgcVMzU0NjchHgEdAQGULlNcUy4CY0pKYzg9bHhsPAECgmFhggICLlNcUy4CY0pKYzgBPGx4bD0CgmFhggIQHycW/mwWJx4RNgEeFwGUFx82ATwv/mwvPAE2HBoBlBocZTBQLy9QMEpjAgJjSj5pPj5pPmGCAgKCYTBQLy9QMEpjAgJjSj5pPj5pPmGCAgKCbgK8FicfEBAfJxb9RAK8Fx8fF/1EAZReLTExLV5eExUBARUTXgAAAAAFAAD/mAQAA2gAIwAvAD8ATwBfAAABDgEnIw4BBxEOAQcjLgEnPgE3MxYXETcmNTQ2NzsCMhYXBwEjDgEUFhczPgE0JgMhIiY9ATQ2MyEyFh0BFAYnISImPQE0NjMhMhYdARQGAyEiJj0BNDYzITIWHQEUBgQAARQLUBcoAQFWRV9GXgEBXkZfMygBAUtJBAI3CxQBAf6tWSo4OCpZKjg4Vv2QBwkJBwJwBwkJB/2QBwkJBwJwBwkJF/2gBwkJBwJgBwkJAnUKBAECKBb+IEhlAwJfR0heAgEbATcDBgdHTQEHCSP+MwE7WDsBATtYOwGhBgQrBQYGBSsEBuAGBCsFBgYFKwQG/kAGBCsFBgYFKwQGAAAEAAD/6QPvAxoAKwA3AEoAWQAABSEuAScRPgE3IR4BFxEOASImNREuASMhIgYVERQWFyE+ATc1NDYyFhcVDgEBER4BPwE2NC8BJgYTIi4BNRE0PgEWHwEeARQGDwEGAyIHBhURFBY/ATY0LwEmA5v80yQvAQEvJAMtIzABAQ0VDQEUD/zTEBQUEAMtDxQBDRUNAQEw/akBMBn6FhX7GTAvEiETEyMmEfoPEBEO+xEVBwYNGw36Cwv6BxcBMCMCiCQvAQEvJP56Cg4OCgGGEBQUEP14DxQBARQPgwoODgqDIzACPv6yHRoPphAwEKgPGf5OEiETAU4UIBMCC6gKHiQeCqYMAa4DCA/+sg8OCKUIHAioBAAEAAD/rQPAA1IAFwAbAB8AIwAAASM1IxUhNSMVIw4BBxEeARchPgE3ES4BAyERIQEhFSE1IRUhA1wyY/5yYzIqOAEBOCoCuCo4AQE4D/0SAu79kAFd/qMB8v4OAy0lJSUlATgr/UgqOAEBOCoCuCs4/MsCFP7SSdlIAAAABgAA/8EDwANBAAgAFAAfAC4AVgB3AAABHgEUBiImNDY3DgEHHgEXPgE3LgElIicmPwE2Fg8BBjciJyY3PgE3NhYHDgEHBgEuASc+ATc2MzIWFAYHIgcOAQceARc+ATc0JyYnJj4BFhcWFxYVDgEDIiY1ETQ2NzM2FzEeARcWFxYUBiInJicuAScjBhURFAYB4SYzM0wzMyY1RwEBRzU1RwEBR/7DAQEIAgQDEAIEAgsCAQgDF0wyBwgILkgWAgEPvv0FBOGxFRUHCwsHExOkzwME6a+v6AUqDhEEAg0OBBMPLQX8cQgKFBIEBAUoTCYYFQYKDwUUFiJFJAEJCgGBASk8KSk8KSQBPC4uPAEBPC4uPCIBAggQBwUIDgYxAQQIMU4YAw8EF0kvBf3KBf2+svcUAgoPCgEBE+Okr+kEBOmvX1YbGQcOCAIGHB5caL79AWEKCAHHFRsEAQEKJBwSFAUPCwUTEBkiCAIO/jkICgAJAAD/6QPDAxgACwAXACMAJAA5AFEAbQCAAJgAAAEjIiY0NjsBMhYUBgcjIiY0NjsBMhYUBhcjIiY0NjsBMhYUBi0BLgEjIgcmIyIGDwEXHgEyNjc2NTQHDgEHLgEvATU+ATcWFxYyNzY3HgEXFRYBITc+AS4BDwEjIgYHERQXHgEzITI2NzY1ES4BBxEHDgEjISImJzURNDYzITIWFQUOAQcVFx4BFz4BNzYnNS4BJwYHBiInJgM35AgMDAjkCQsMPq4IDAwIrgkLCyLZCAwMCNkJCwv9gwEmBDIkIBkZICQxBAECEWwnbRECHA5WExRWDQECHxcZEAkbCREZFiACAQG9/WCxBgQIDQbjHxwkAQUIIBQDAhgjBQEBJAMBAg0J/P4JDQIOCgMCCw79cRcfAgENVhQUVg0CAQIfFxkQCRsJEQGDCxEMDBELcwsRDAwRC3MLEQwMEQu2BSQvFBQtIwUWRU1MRQkJAws2QQcHQTcHChYcAQESCgoSAQEdFwMGAUBnBA0MBASEJRz93A4MERYdFwYHAiQcJcD+WwUJCwsJBQIkCw4OC8EBHBYEDTdBBwdBNgcGAxcdAQESCgoSAAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAECAQMBBAEFAQYBBwEIAQkAC3BhaWhhbmdiYW5nBXlpbmxlBnlpbmxlMQV2aWRlbw1tZWlyaXR1aWppYW4tBW11c2ljAkZNAAAA#iefix) format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url(data:application/x-font-ttf;base64,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) format("truetype"), url(#iconfont) format("svg");
                    /* iOS 4.1- */
                }
                .icon-paihangbang:before {
                    content: "\E64B";
                }
                .icon-yinle:before {
                    content: "\E6E3";
                }
                .icon-yinle1:before {
                    content: "\E62B";
                }
                .icon-video:before {
                    content: "\E661";
                }
                .icon-meirituijian-:before {
                    content: "\E652";
                }
                .icon-music:before {
                    content: "\E501";
                }
                .icon-FM:before {
                    content: "\E606";
                }
                .iconfont {
                    font-family: "iconfont" !important;
                    font-size: 16px;
                    font-style: normal;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }

                ul{
                    margin-bottom: 30px;
                    li{
                        width: 25%;
                        float: left;
                        text-align: center;
                        .icon{
                            background: #32373a;
                            border-radius: 50%;
                            width: 45px;
                            height: 45px;
                            line-height: 45px;
                            margin: 0 auto;
                            color: #fff;
                            .iconfont{
                                font-size: 20px;
                            }
                        }
                        p{
                            margin-top:5px; 
                        }
                    }
                }
            } 
        }
        .content{
            margin-bottom: 1rem;
            .personalized{
                h2{
                    padding-left: 15px;
                    padding-bottom: 5px;
                    border-bottom: solid 1px #f3f3f3;
                    .van-icon{
                        font-size: 10px;
                        margin-left: -4px;
                    }
                }
                ul{
                    li{
                        float: left;
                        width: 33%;
                        height: 2.5rem;
                        .personalized_icon{
                            position: relative;
                            padding: 10px 15px 0 15px;
                            img{
                                display: block;
                                width: 100%;
                                height: 100%;
                                border-radius: 5px;
                            }
                            span{
                                position: absolute;
                                top: 11px;
                                right: 17px;
                                font-size: 10px;
                                color: #fff;
                                // 小耳机图标
                                background-image: url(../images/erji.svg);
                                background-position: 0;
                                background-repeat: no-repeat;
                                background-size: 11px 10px;
                                text-shadow: 1px 0 0 rgba(0,0,0,.15);
                                padding-left: 13px;
                            }
                        }
                        .personalized_name{
                            padding-left: 15px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
            .playlist{
                margin-top: 40px;
                 h2{
                    padding-left: 15px;
                    border-bottom: solid 1px #f3f3f3;
                    padding-bottom: 5px;
                    .van-icon{
                        font-size: 10px;
                        margin-left: -4px;
                    }
                }
                ul{
                    li{
                        float: left;
                        width: 33%;
                        height: 2.5rem;
                        .playlist_icon{
                            position: relative;
                            padding: 10px 15px 0 15px;
                            img{
                                display: block;
                                width: 100%;
                                height: 100%;
                                border-radius: 5px;
                            }
                            span{
                                position: absolute;
                                top: 11px;
                                right: 17px;
                                font-size: 10px;
                                color: #fff;
                                // 小耳机图标
                                background-image: url(../images/erji.svg);
                                background-position: 0;
                                background-repeat: no-repeat;
                                background-size: 11px 10px;
                                text-shadow: 1px 0 0 rgba(0,0,0,.15);
                                padding-left: 13px;
                            }
                        }
                        .playlist_name{
                            padding-left: 15px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
            .newsong{
                margin-top: 30px;
                padding-left: 15px;
                h2{
                    font-size: 16px;
                    font-weight: 500; 
                    height: 20px;
                    line-height: 20px;
                    position: relative;
                }
                h2:after{
                    content: " ";
                    position: absolute;
                    left: -15px;
                    top: 50%;
                    margin-top: -9px;
                    width: 2px;
                    height: 16px;
                    background-color: #d33a31;
                }
                ul{
                    margin-top: 10px;
                    li{
                        height: 50px;
                        border-bottom: solid 1px #f3f3f3;
                        position: relative;
                        .sgchfl{
                            float: left;
                            width: 85%;
                            position: absolute;
                            top: 50%;
                            transform: translate(0,-50%);
                            .sgchfl_name{
                                font-size: 16px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-break: normal;
                            }
                            .arists{
                                margin-top: 5px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-break: normal;
                                font-size: 12px;
                                color: #888;
                            }
                        }
                        .sgchfr{
                            float: right;
                            height: 100%;
                            position: relative;
                            .sgchply{
                                 position: absolute;
                                top: 50%;
                                transform: translate(0,-50%);
                                right: 15px;
                                display: inline-block;
                                width: 22px;
                                height: 22px;
                                background: url(../images/index_icon_2x.png) no-repeat;
                                background-position: -24px 0px;
                                background-size: 166px 97px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>


